<template>
  <el-drawer :model-value="visiable" title="铁塔" :before-close="close" :with-header="false">
    <!-- search -->
    <div class="flex mb-5">
      <el-input
        v-model="search"
        placeholder="请输入铁塔名称"
        style="width: 240px"
        clearable
        class="mr-2"
        @input="searchChange" />
      <el-button type="primary" size="default" @click="searchChange">查询</el-button>
    </div>
    <!-- 表格 -->
    <el-table :data="towers?.data" border center>
      <el-table-column type="index" label="ID" width="70" />
      <el-table-column property="tName" label="名称" />
      <el-table-column property="tType" label="塔型" />
      <el-table-column property="corner" label="转角" width="100" />
      <el-table-column property="altitude" label="高程" width="100" />
      <el-table-column fixed="right" label="操作" min-width="50">
        <template #default>
          <el-button link type="primary" size="small" @click="edit">
            <FileEditingOne theme="outline" size="16" fill="#34495e" />
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-card shadow="hover" v-for="tower in towers?.data" :id="tower.id" class="mb-2 cursor-pointer">
      <!-- card body -->
      <div class="flex justify-between items-center">
        <div class="flex items-center">
          <div class="w-10 h-10 bg-[#2ecc71] flex justify-center items-center rounded-md">
            <EiffelTower theme="outline" size="18" fill="#fff" />
          </div>
          <div class="ml-2">
            <div class="text-sm">
              {{ tower.tName }}
              <span class="ml-2 text-xs text-red-400">{{ tower.corner }}</span>
            </div>
            <div class="text-xs text-gray-500">{{ tower.tType }}</div>
          </div>
        </div>

        <div class="text-sm">{{ tower.altitude }}m</div>
      </div>
    </el-card>

    <template #footer>
      <div style="flex: auto">
        <el-pagination
          background
          layout="prev, pager, next, total"
          v-model:current-page="currentPage"
          :total="towers?.total"
          class="mt-5"
          @current-change="currentChange" />
      </div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import useTower from '@/composables/useTower'
import { FileEditingOne, EiffelTower } from '@icon-park/vue-next'
const prop = defineProps(['visiable', 'sectionId', 'close'])

const search = ref('')
const currentPage = ref(1)

const { towers, all: allTower } = useTower()

const searchChange = async () => {
  await allTower({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
}

const currentChange = async () => {
  await allTower({ sectionId: prop.sectionId, search: search.value, page: currentPage.value })
}

const edit = () => {}

allTower({ sectionId: prop.sectionId, search: search.value, page: 1 })
</script>
